<template>
<div class="backImage">
  <img src="../../assets/timg.jpg" alt="">
    <div class="divForm">
        <form>
            <p class="p1">
                登录
            </p>
            <p>
                用户名:<input type="text" name="username" class="input" v-model="user">
            </p>
            <p>
                密 码:<input type="password" name="password" class="input" v-model="pwd">
            </p>
            <div class="bottom">
            <div style="margin-top:10px" class="login"> <input type="button" value="登录" class="button is-primary" @click="login"></div>
            <div class="register">
                 <a class="button is-link is-outlined" @click="register">注册</a>
            </div>
            </div>
        </form>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import bus from '../../Bus/eventBus'
export default {
   data() {
        return {
            user:'',
            pwd:'',
        }
    },
    created() {
      this.user=this.$route.query.username;
      this.pwd=this.$route.query.password;
    },
    methods: {
      register(){
          this.$router.push('/register')
      },
      login(){
            if(this.user==''){
            alert('用户名不能为空！')
            return false
            }
            if(this.pwd==''){
                alert('密码不能为空！')
                return false
            }
            axios({
                method:'post',
                url:'http://localhost:8088/Login',
                params:{
                    userName:this.user,
                    password:this.pwd
                }
            }).then((res)=>{
                if(res.data.isLogin){
                  this.$router.push({
                    path:'/home',
                    query:{
                      username:this.user
                    }
                  })
                }
                else
                alert(res.data.tip);
            });
        }
        },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .divForm {
            position: absolute;
            left: 550px;
            top: 100px;
            width: 400px;
            height: 200px;
            text-align: center;
            margin-left: auto;
            margin-left: auto;
            border: solid 1px black;
            opacity: 1;
            background-color:rgb(168, 151, 218);
            font-weight: 40px;
            color: rgb(0, 217, 255)
        }
        .p1{
            font-size: 20px;
            font-weight: 300px;
        }
        .register{
          display: inline-block;
        }
        .login{
          display: inline-block;
        }
</style>
